<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<meta name="theme-color" content="#26a69a">
	<link rel="icon" href="favicon.ico">
	<link rel="bookmark" type="image/png" href="favicon.png">
	<link rel="apple-touch-icon" href="favicon.png">
	<link rel="manifest" href="manifest.json">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>夏目友人帐~叶月之记~ 全流程攻略</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #e0f7fa, #f9fbe7);
            min-height: 100vh;
            min-width: 100vw;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 800px;
            width: 100%;
            background: rgba(255, 255, 255, 0.92);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 100, 100, 0.15);
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }

        header {
            background: linear-gradient(120deg, #4db6ac, #81c784);
            color: white;
            padding: 25px;
            text-align: center;
            position: relative;
        }

        h1 {
            font-size: 28px;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .subtitle {
            font-size: 16px;
            opacity: 0.9;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .week-menu {
            position: relative;
            cursor: pointer;
            width: 30px;
            padding: 6px;
            height: 30px;
            background: rgba(255, 255, 255, 0.342);
            border-radius: 50%;
        }

        .week-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            min-width: 150px;
            z-index: 100;
            display: none;
        }

        .week-dropdown.show {
            display: block;
        }

        .week-item {
            padding: 8px 20px;
            cursor: pointer;
            transition: all 0.3s;
            color: #004d40;
        }

        .week-item:hover {
            background: #e0f2f1;
        }

        .week-item.active {
            background: #4db6ac;
            color: white;
        }



        .date-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: #fff;
            border-bottom: 2px solid #e0f2f1;
        }

        .nav-btn {
            background: #4db6ac;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        }

        .nav-btn:hover {
            background: #26a69a;
            box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
        }

        .nav-btn:disabled {
            background: #b2dfdb;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .current-date {
            font-size: 24px;
            font-weight: bold;
            color: #00695c;
        }

        .schedule-container {
            padding: 20px;
        }

        .time-section {
            margin-bottom: 30px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            border-left: 5px solid;
        }

        .day-section {
            border-left-color: #4db6ac;
        }

        .evening-section {
            border-left-color: #ffb74d;
        }

        .night-section {
            border-left-color: #7986cb;
        }

        .section-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: #00695c;
            font-weight: bold;
        }

        .section-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
            font-size: 18px;
        }

        .day-icon {
            background: #b2dfdb;
            color: #004d40;
        }

        .evening-icon {
            background: #ffe0b2;
            color: #e65100;
        }

        .night-icon {
            background: #c5cae9;
            color: #283593;
        }

        .task-list {
            list-style: none;
        }

        .task-item {
            padding: 12px 15px;
            background: white;
            border-radius: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid #e0f2f1;
        }


        .task-checkbox {
            margin-right: 15px;
            margin-top: 3px;
            accent-color: #4db6ac;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        .task-content {
            flex: 1;
        }

        .task-title {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .task-footnote {
            font-size: 13px;
            color: #78909c;
            font-style: italic;
            padding-left: 0px;
        }

        .progress-bar {
            height: 8px;
            background: #e0f2f1;
            border-radius: 4px;
            margin: 30px 20px 20px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4db6ac, #81c784);
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .progress-text {
            text-align: center;
            color: #00695c;
            font-weight: 500;
            margin-top: 5px;
            margin-bottom: 15px;
        }

        .next-day-text {
            text-align: center;
            color: #00695c;
            font-weight: 500;
            user-select: none;
            line-height: 30px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 15px;
            padding: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            border-left: 5px solid;
            border-left-color: #4db6ac;
        }

        .cat-paw {
            position: absolute;
            width: 40px;
            height: 40px;
            opacity: 0.2;
        }

        .paw1 {
            top: 15px;
            left: 15px;
            transform: rotate(-20deg);
        }

        .paw2 {
            top: 15px;
            right: 15px;
            transform: rotate(20deg);
        }

        .paw3 {
            bottom: 15px;
            left: 15px;
            transform: rotate(20deg);
        }

        .paw4 {
            bottom: 15px;
            right: 15px;
            transform: rotate(-20deg);
        }

        .week-indicator {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
        }

        @media (max-width: 600px) {
            

            h1 {
                font-size: 22px;
            }

            .current-date {
                font-size: 20px;
            }

            .time-section {
                padding: 15px;
            }
        }

		@media (max-width: 559px) {
			body{
				padding: 0px;
			}
			.container {
				
				border-radius: 0px;
				box-shadow: none;
            
			}
		}

        .position-marker {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 15px;
            padding: 5px 10px;
            font-size: 12px;
            color: #00695c;
            z-index: 10;
        }
        
    </style>
</head>

<body>
    <div id="app" class="container">
        <div class="position-marker" v-if="positionLoaded">
            已恢复阅读位置: 第{{ currentWeek + 1 }}周目 {{ currentDate }}
        </div>

        <header>
            <svg v-for="npi in 4" t="1754271273550" class="cat-paw" :class="'paw'+npi" viewBox="0 0 1304 1024"
                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8730" width="24" height="24">
                <path
                    d="M66.37499999 452.50410371a155.38833706 132.0881207 90 1 0 264.1762423 0 155.38833706 132.0881207 90 1 0-264.1762423 0Z"
                    fill="#ffffff" p-id="8731"></path>
                <path
                    d="M1051.10084849 732.42559364a127.42807778 155.38833706 12.07 1 0 64.98544379-303.90629003 127.42807778 155.38833706 12.07 1 0-64.98544379 303.90629003Z"
                    fill="#ffffff" p-id="8732"></path>
                <path
                    d="M348.28417926 220.46609029a173.46609029 135.78401697 90 1 0 271.56803487 0 173.46609029 135.78401697 90 1 0-271.56803487 0Z"
                    fill="#ffffff" p-id="8733"></path>
                <path
                    d="M833.98062994 438.53515768a135.78401697 173.46609029 6.71 1 0 40.53697078-344.55579081 135.78401697 173.46609029 6.71 1 0-40.53697078 344.55579081Z"
                    fill="#ffffff" p-id="8734"></path>
                <path
                    d="M920.75809924 760.87041037c-9.72181403 147.19308896-151.85313188 226.17278588-320.01641484 215.00475191s-298.72483773-107.98444881-289.2440599-255.25788379 157.39697631-240.63498882 322.10539919-246.50021545c170.33261332 34.22721413 296.87688959 139.47991328 287.15507555 286.75334733z"
                    fill="#ffffff" p-id="8735"></path>
            </svg>

            <h1>夏目贵志的夏休日程</h1>
            <div class="subtitle">
                <div>第{{ currentWeek + 1 }}周目</div>
                <div class="week-menu" @click="toggleWeekMenu">
                    <svg t="1754272139023" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9850" width="16" height="16">
                        <path
                            d="M852.11 620A108 108 0 1 1 960 512a107.94 107.94 0 0 1-107.89 108zM512 620a108 108 0 1 1 107.89-108A107.95 107.95 0 0 1 512 620zM171.89 620a108 108 0 1 1 107.88-108 107.94 107.94 0 0 1-107.88 108z"
                            fill="#ffffff" p-id="9851"></path>
                    </svg>
                    <div class="week-dropdown" :class="{ show: showWeekMenu }">
                        <div class="week-item" v-for="(week, index) in weeksData" :key="index"
                            :class="{ active: currentWeek === index }" @click.stop="selectWeek(index)">
                            第{{ index + 1 }}周目
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="date-nav">
            <button class="nav-btn" id="prev-day" @click="prevDay" :disabled="currentDayIndex === 0">
                <svg t="1754272221086" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="11184" width="18" height="18">
                    <path
                        d="M358.997 512l311.168-311.168a42.667 42.667 0 1 0-60.33-60.33L268.5 481.834a42.667 42.667 0 0 0 0 60.33L609.835 883.5a42.667 42.667 0 0 0 60.33-60.331L358.997 512z"
                        p-id="11185" fill="#ffffff"></path>
                </svg>
            </button>
            <div class="current-date">{{ currentDate }}</div>
            <button class="nav-btn" id="next-day" @click="nextDay"
                :disabled="currentDayIndex === currentWeekData.length - 1">
                <svg t="1754272467880" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3342" width="18" height="18">
                    <path
                        d="M665.003 512L353.835 200.832a42.667 42.667 0 0 1 60.33-60.33L755.5 481.834a42.667 42.667 0 0 1 0 60.33L414.165 883.5a42.667 42.667 0 1 1-60.33-60.331L665.003 512z"
                        p-id="3343" fill="#ffffff"></path>
                </svg>

            </button>
        </div>

        <div class="schedule-container">
            <!-- 白天部分 -->
            <div class="time-section day-section" v-if="currentDay.events.day.length != 0">
                <div class="section-header">
                    <div class="section-icon day-icon">
                        <svg t="1754272735930" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="16316" width="24" height="24">
                            <path
                                d="M900.8 432.96a137.92 137.92 0 0 1-58.24-140.16c14.72-76.16 27.52-101.12 8.64-120.32s-43.84-6.08-120.32 8.64a137.92 137.92 0 0 1-140.16-58.24C547.52 58.88 538.88 32 512 32s-35.52 26.88-79.04 91.2a137.92 137.92 0 0 1-140.16 57.92C216.64 166.4 192 153.6 172.48 172.48s-6.08 43.84 8.64 120.32a137.92 137.92 0 0 1-58.24 140.16C58.88 476.48 32 485.12 32 512s26.88 35.52 91.2 79.04a137.92 137.92 0 0 1 57.92 140.16c-14.72 76.16-27.52 100.8-8.64 120.32s43.84 6.08 120.32-8.64a137.92 137.92 0 0 1 140.16 58.24c43.52 64 52.16 90.88 79.04 90.88s35.52-26.88 79.04-90.88a137.92 137.92 0 0 1 140.16-58.24c76.16 14.72 101.12 27.52 120.32 8.64s6.08-43.84-8.64-120.32a137.92 137.92 0 0 1 57.92-140.16C965.12 547.52 992 538.88 992 512s-26.88-35.52-91.2-79.04zM512 752a240 240 0 1 1 240-240 240 240 0 0 1-240 240zM512 352a160 160 0 1 0 160 160 160 160 0 0 0-160-160z"
                                fill="#004d40" p-id="16317"></path>
                        </svg>
                    </div>
                    <h2>白天</h2>
                </div>
                <ul class="task-list">
                    <li class="task-item" v-for="(task, index) in currentDay.events.day" :key="'day-'+index">
                        <input type="checkbox" class="task-checkbox" :id="getTaskId('day', index)"
                            v-model="task.completed" @change="updateTaskStatus('day', index)">
                        <div class="task-content">
                            <div class="task-title">{{ task.title }}</div>
                            <div class="task-footnote" v-if="task.footnote">{{ task.footnote }}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 傍晚部分 -->
            <div class="time-section evening-section" v-if="currentDay.events.evening.length != 0">
                <div class="section-header">
                    <div class="section-icon evening-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 640 640">
                            <path fill="#e65100"
                                d="M485.6 49.2C490.5 51.2 494.1 55.6 495.1 60.8L512 144L595.2 160.8C600.4 161.9 604.7 165.4 606.8 170.3C608.9 175.2 608.3 180.8 605.4 185.2L558.5 255.9L605.4 326.6C608.3 331 608.9 336.6 606.8 341.5C604.7 346.4 600.4 350 595.2 351L533 363.7C521.1 355 507.9 348.1 493.6 343.3C491.1 330.6 486.8 318.6 480.9 307.6C490.4 292.7 496 275 496 255.9C496 202.9 453 159.9 400 159.9C352.1 159.9 312.4 195 305.2 240.8C278.7 220.5 245.7 208.3 209.8 207.9L194.7 185.2C191.8 180.8 191.2 175.2 193.3 170.3C195.4 165.4 199.7 161.8 204.9 160.8L288 144L304.8 60.8C305.9 55.6 309.4 51.3 314.3 49.2C319.2 47.1 324.8 47.7 329.2 50.6L400 97.6L470.7 50.7C475.1 47.8 480.7 47.2 485.6 49.3zM448 256C448 259.8 447.6 263.5 446.7 267.1C425 250.1 397.7 240 368 240C363.4 240 358.9 240.2 354.5 240.7C360.9 221.7 378.9 208 400 208C426.5 208 448 229.5 448 256zM128 576C75 576 32 533 32 480C32 437.5 59.6 401.4 97.9 388.8C96.6 382.1 96 375.1 96 368C96 306.1 146.1 256 208 256C251.1 256 288.5 280.3 307.2 316C321.9 298.9 343.7 288 368 288C412.2 288 448 323.8 448 368C448 373.5 447.4 378.8 446.4 384C446.9 384 447.5 384 448 384C501 384 544 427 544 480C544 533 501 576 448 576L128 576z" />
                        </svg>
                    </div>
                    <h2>傍晚</h2>
                </div>
                <ul class="task-list">
                    <li class="task-item" v-for="(task, index) in currentDay.events.evening" :key="'evening-'+index">
                        <input type="checkbox" class="task-checkbox" :id="getTaskId('evening', index)"
                            v-model="task.completed" @change="updateTaskStatus('evening', index)">
                        <div class="task-content">
                            <div class="task-title">{{ task.title }}</div>
                            <div class="task-footnote" v-if="task.footnote">{{ task.footnote }}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 夜晚部分 -->
            <div class="time-section night-section" v-if="currentDay.events.night.length != 0">
                <div class="section-header">
                    <div class="section-icon night-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 640 640">
                            <path fill="#283593"
                                d="M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z" />
                        </svg>
                    </div>
                    <h2>夜晚</h2>
                </div>
                <ul class="task-list">
                    <li class="task-item" v-for="(task, index) in currentDay.events.night" :key="'night-'+index">
                        <input type="checkbox" class="task-checkbox" :id="getTaskId('night', index)"
                            v-model="task.completed" @change="updateTaskStatus('night', index)">
                        <div class="task-content">
                            <div class="task-title">{{ task.title }}</div>
                            <div class="task-footnote" v-if="task.footnote">{{ task.footnote }}</div>
                        </div>
                    </li>
                </ul>
            </div>
			
			<div class="next-day-text" 
                v-if="currentDayIndex < currentWeekData.length - 1" >
                <div @click="nextDay" style="cursor: pointer;">
                
					&gt;&gt;&nbsp;前往下一天&nbsp;&gt;&gt;
                </div>
			</div>
			
        </div>

        <div class="progress-bar">
            <div class="progress-fill" :style="{ width: progress + '%' }"></div>
        </div>
        <div class="progress-text">夏休进度: {{ progress }}%</div>
        <div class="progress-text">
			<a style="font-size: 12px;color: gray; padding: 6px;" target="_blank" href="https://gitee.com/ZYFDroid/NatsumeHaduki_GameWalkthrough">关于本攻略</a>
        </div>
		
    </div>

    <script>
        (function () {

            var rawData = ${JSON_DATA_MIN};


            var transformedData = [];

            for (let index = 0; index < rawData.length; index++) {
                const element = rawData[index];
                transformedData.push(element.days);
            }

            for (let i = 0; i < transformedData.length; i++) {
                const element = transformedData[i];
                for (let j = 0; j < element.length; j++) {
                    const day = element[j];

                    day.events.day.forEach(e => e.completed = false);
                    day.events.evening.forEach(e => e.completed = false);
                    day.events.night.forEach(e => e.completed = false);

                }
            }
            window.gameWeekData = transformedData;
        })();

    </script>

    <script>
        const { createApp, ref, computed, reactive, watch, onMounted } = Vue;

        createApp({
            setup() {
                // 四个周目的数据
                const weeksData = reactive(window.gameWeekData);

                // 当前周目索引
                const currentWeek = ref(0);
                // 当前日期索引
                const currentDayIndex = ref(0);
                // 显示周目菜单
                const showWeekMenu = ref(false);
                // 标记位置是否已加载
                const positionLoaded = ref(false);

                // 计算当前周目的数据
                const currentWeekData = computed(() => {
                    return weeksData[currentWeek.value];
                });

                // 计算当前日期数据
                const currentDay = computed(() => {
                    return currentWeekData.value[currentDayIndex.value];
                });

                // 当前日期显示
                const currentDate = computed(() => {
                    return currentDay.value.date;
                });

                // 计算进度
                const progress = computed(() => {
                    let totalTasks = 0;
                    let completedTasks = 0;

                    currentWeekData.value.forEach(day => {
                        ['day', 'evening', 'night'].forEach(time => {
                            day.events[time].forEach(task => {
                                totalTasks++;
                                if (task.completed) {
                                    completedTasks++;
                                }
                            });
                        });
                    });

                    return totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
                });

                // 切换周目菜单显示状态
                const toggleWeekMenu = () => {
                    showWeekMenu.value = !showWeekMenu.value;
                };

                // 选择周目
                const selectWeek = (index) => {
                    currentWeek.value = index;
                    currentDayIndex.value = 0;
                    showWeekMenu.value = false;
                    loadWeekProgress();
                    saveReadingPosition();
                };

                // 上一天
                const prevDay = () => {
                    if (currentDayIndex.value > 0) {
                        currentDayIndex.value--;
                        saveReadingPosition();
                        window.setTimeout(()=>{
                        window.scrollTo({
							top: 0,
							left: 0,
							behavior: 'smooth' // 可选，平滑滚动
						})},50);
                    }
                };

                // 下一天
                const nextDay = () => {
                    if (currentDayIndex.value < currentWeekData.value.length - 1) {
                        currentDayIndex.value++;
                        saveReadingPosition();
                        window.setTimeout(()=>{
                        window.scrollTo({
							top: 0,
							left: 0,
							behavior: 'smooth' // 可选，平滑滚动
						})},50);

                    }
                };

                // 生成任务ID（用于LocalStorage）
                const getTaskId = (time, index) => {
                    const date = currentDay.value.date.replace(/[月日]/g, '');
                    return `week${currentWeek.value}-day${currentDayIndex.value}-${time}-${index}`;
                };

                // 更新任务状态
                const updateTaskStatus = (time, index) => {
                    const task = currentDay.value.events[time][index];
                    const taskId = getTaskId(time, index);
                    localStorage.setItem(taskId, task.completed);
                };

                // 加载周目进度
                const loadWeekProgress = () => {
                    currentWeekData.value.forEach((day, dayIndex) => {
                        ['day', 'evening', 'night'].forEach(time => {
                            day.events[time].forEach((task, taskIndex) => {
                                const taskId = `week${currentWeek.value}-day${dayIndex}-${time}-${taskIndex}`;
                                const completed = localStorage.getItem(taskId) === 'true';
                                task.completed = completed;
                            });
                        });
                    });
                };

                // 保存阅读位置
                const saveReadingPosition = () => {
                    const position = {
                        week: currentWeek.value,
                        day: currentDayIndex.value
                    };
                    localStorage.setItem('readingPosition', JSON.stringify(position));
                };

                // 加载阅读位置
                const loadReadingPosition = () => {
                    const savedPosition = localStorage.getItem('readingPosition');
                    if (savedPosition) {
                        try {
                            const position = JSON.parse(savedPosition);
                            currentWeek.value = position.week;
                            currentDayIndex.value = position.day;
                            positionLoaded.value = true;

                            // 3秒后隐藏位置提示
                            setTimeout(() => {
                                positionLoaded.value = false;
                            }, 3000);
                        } catch (e) {
                            console.error('加载阅读位置失败', e);
                        }
                    }
                };

                // 初始化
                onMounted(() => {
                    // 先加载阅读位置
                    loadReadingPosition();

                    // 然后加载任务状态
                    loadWeekProgress();

                    // 当点击页面其他区域时关闭周目菜单
                    document.addEventListener('click', (e) => {
                        if (!e.target.closest('.week-menu')) {
                            showWeekMenu.value = false;
                        }
                    });
                });

                // 监视周目和日期变化，自动保存位置
                watch([currentWeek, currentDayIndex], () => {
                    saveReadingPosition();
                });

                return {
                    weeksData,
                    currentWeek,
                    currentDayIndex,
                    showWeekMenu,
                    currentWeekData,
                    currentDay,
                    currentDate,
                    progress,
                    positionLoaded,
                    toggleWeekMenu,
                    selectWeek,
                    prevDay,
                    nextDay,
                    getTaskId,
                    updateTaskStatus
                };
            }
        }).mount('#app');
    </script>
</body>

</html>